<template>
  <div class="account-management">
    <!-- 顶部标题 -->
    <header class="header">
      <div class="header-content">
        <div class="header-left">
          <button class="back-button" @click="goBack">
            <el-button class="back-button" @click="goBack" :icon="ArrowLeftBold" circle />
          </button>
          <h1>账号管理</h1>
        </div>
        <div class="user-brief">
          <img :src="user.avatar" class="user-avatar" alt="用户头像" />
          <span>{{ user.name }}</span>
        </div>
      </div>
    </header>

    <!-- 主体内容 -->
    <div class="main-content">
      <!-- 左侧导航 -->
      <aside class="sidebar">
        <nav>
          <ul>
            <li v-for="tab in tabs" :key="tab.id" :class="{ active: selectedTab === tab.id }"
              @click="selectedTab = tab.id">
              <i :class="tab.icon"></i>
              {{ tab.name }}
            </li>
          </ul>
        </nav>
      </aside>

      <!-- 右侧内容 -->
      <section class="content">
        <!-- 基本资料 -->
        <div v-if="selectedTab === 'basic'" class="basic-info card">
          <h2><i class="icon-user"></i> 基本资料</h2>
          
          <!-- 个人信息区域 -->
          <div class="info-section">
            <h3>个人信息</h3>
          <div class="info-form">
            <div class="form-row">
              <label>姓名</label>
              <div class="readonly-field">{{ user.name }}</div>
            </div>

            <div class="form-row">
              <label>用户ID</label>
              <div class="readonly-field">{{ user.id }}</div>
            </div>

            <div class="form-row">
              <label>性别</label>
                <div class="readonly-field">{{ user.gender }}</div>
                  </div>
              </div>
            </div>

          <!-- 联系方式区域 -->
          <div class="info-section">
            <h3>联系方式</h3>
            <div class="info-form">
            <div class="form-row">
              <label>手机号</label>
              <div class="input-group">
                  <input 
                    type="tel" 
                    v-model="user.phone" 
                    :readonly="!isEditingPhone"
                    :class="{ 'editable': isEditingPhone }"
                    placeholder="请输入手机号"
                    @input="validatePhone" />
                  <button class="edit-button" 
                          @click="handlePhoneEdit"
                          :class="{ 'save': isEditingPhone }">
                    {{ isEditingPhone ? '保存' : '修改' }}
                </button>
              </div>
                <div class="error-message" v-if="phoneError">
                  {{ phoneError }}
            </div>
              </div>

              <!-- 验证码输入框 -->
              <div class="form-row" v-if="showVerificationCode">
                <label>验证码</label>
                <div class="input-group">
                  <input 
                    type="text" 
                    v-model="verificationCode" 
                    placeholder="请输入验证码"
                    maxlength="6" />
                  <span class="countdown" v-if="countdown > 0">{{ countdown }}s</span>
                </div>
              </div>
            </div>
          </div>

          <!-- 单位信息区域 -->
          <div class="info-section">
            <h3>单位信息</h3>
            <div class="info-form">
            <div class="form-row">
              <label>所属单位</label>
              <div class="unit-list">
                <div v-for="(unit, index) in user.units" :key="index" class="unit-item">
                    <div class="unit-content">
                      <i class="icon-organization"></i>
                      <span>{{ unit.fullName }}</span>
                </div>
                    <div class="unit-actions">
                      <button class="edit-button" @click="editUnit(index)">
                        修改
                      </button>
                    </div>
                  </div>
                  <button class="add-button" @click="showUnitDialog" :disabled="!canSaveChanges">
                  <i class="icon-plus"></i> 添加单位
                </button>
              </div>
            </div>
            </div>
          </div>

          <!-- 隐私声明 -->
          <div class="privacy-notice">
            <i class="icon-shield"></i>
            <p>我们严格保护您的个人信息安全。查看<a href="#" @click="showPrivacyPolicy">隐私政策</a></p>
          </div>
        </div>

        <!-- 修改头像 -->
        <div v-if="selectedTab === 'changeAvatar'" class="avatar-upload card">
          <h2><i class="icon-camera"></i> 修改头像</h2>
          <div class="upload-area" @dragover.prevent @drop="handleDrop" @dragleave.prevent="isDragging = false" @dragenter.prevent="isDragging = true">
            <div class="avatar-preview" :class="{ 'is-dragging': isDragging }">
              <img v-if="avatarPreview" :src="avatarPreview" alt="头像预览" />
              <div v-else class="empty-avatar">
                <i class="icon-user"></i>
              </div>
              <div class="upload-mask" :class="{ 'is-dragging': isDragging }">
                <i class="icon-upload"></i>
                <p>拖放文件或点击上传</p>
                <span class="upload-tip">支持 JPG、PNG 格式，最大 5MB</span>
              </div>
            </div>
            <input type="file" ref="fileInput" accept="image/jpeg,image/png" @change="handleFileSelect" hidden />
          </div>
          
          <div class="upload-error" v-if="uploadError">
            <i class="icon-warning"></i>
            <span>{{ uploadError }}</span>
          </div>

          <div class="avatar-actions">
            <button class="primary-button" @click="uploadAvatar" :disabled="!avatarFile">
              <i class="icon-check"></i>
              保存更改
            </button>
            <button class="secondary-button" @click="resetAvatar">
              <i class="icon-refresh"></i>
              恢复原始头像
            </button>
          </div>
        </div>

        <!-- 密码管理 -->
        <div v-if="selectedTab === 'password'" class="password-management card">
          <h2><i class="icon-lock"></i> 密码管理</h2>
          <div class="security-info">
            <div class="security-header">
              <div class="user-info">
                <img :src="user.avatar" class="user-avatar" alt="用户头像" />
                <div class="user-details">
                  <h3>{{ user.name }}</h3>
                  <p class="last-modified">上次密码修改时间：{{ lastPasswordChange }}</p>
                  <div class="security-level">
                    <span class="level-text">安全等级：</span>
                    <el-rate
                      v-model="securityLevel"
                      :colors="['#F56C6C', '#E6A23C', '#67C23A']"
                      :max="3"
                      disabled
                      show-score
                      text-color="#ff9900"
                      score-template="{value}"
                    />
                  </div>
                </div>
              </div>
            </div>

            <div class="security-actions">
              <!-- 修改密码卡片 -->
              <div class="action-card">
                <div class="action-header">
                  <i class="el-icon-key"></i>
                  <h3>修改密码</h3>
                </div>
                <div class="action-content">
                  <p class="description">定期修改密码可以提高账户安全性，建议您每3个月更换一次密码</p>
                  <div class="last-change">
                    <i class="el-icon-time"></i>
                    <span>距离上次修改已经 {{ daysSinceLastChange }} 天</span>
                  </div>
                  <el-button type="primary" @click="showChangePasswordDialog" class="action-button">
                    <i class="el-icon-edit"></i>修改密码
                  </el-button>
                </div>
              </div>

              <!-- 安全问题卡片 -->
              <div class="action-card">
                <div class="action-header">
                  <i class="el-icon-question"></i>
                  <h3>安全问题</h3>
                </div>
                <div class="action-content">
                  <p class="description">设置安全问题可以在忘记密码时用于身份验证，提高账户安全性</p>
                  <div class="status-info">
                    <i :class="securityQuestionsSet ? 'el-icon-success' : 'el-icon-warning'"></i>
                    <span>{{ securityQuestionsSet ? '已设置安全问题' : '未设置安全问题' }}</span>
                  </div>
                  <el-button type="primary" @click="openSecurityQuestionsForm" class="action-button">
                    <i class="el-icon-setting"></i>{{ securityQuestionsSet ? '修改安全问题' : '设置安全问题' }}
                  </el-button>
                </div>
              </div>

              <!-- 双因素认证卡片 -->
              <div class="action-card">
                <div class="action-header">
                  <i class="el-icon-mobile-phone"></i>
                  <h3>双因素认证</h3>
                </div>
                <div class="action-content">
                  <p class="description">启用双因素认证后，登录时需要额外验证，可以有效防止账户被盗</p>
                  <div class="status-info">
                    <el-switch
                      v-model="twoFactorEnabled"
                      @change="toggleTwoFactor"
                      active-color="#67C23A"
                      inactive-color="#DCDFE6"
                    />
                    <span class="status-text">{{ twoFactorEnabled ? '已启用' : '未启用' }}</span>
                  </div>
                </div>
              </div>
            </div>
          </div>

          <!-- 修改密码对话框 -->
          <el-dialog
            v-model="showPasswordDialog"
            title="修改密码"
            width="500px"
            custom-class="password-dialog"
            :close-on-click-modal="false"
          >
            <el-form
              ref="passwordFormRef"
              :model="passwordForm"
              :rules="passwordRules"
              label-width="100px"
              @submit.prevent="handlePasswordChange"
            >
              <el-form-item label="当前密码" prop="currentPassword">
                <el-input
                  v-model="passwordForm.currentPassword"
                  type="password"
                  show-password
                  placeholder="请输入当前密码"
                >
                  <template #prefix>
                    <i class="el-icon-lock"></i>
                  </template>
                </el-input>
              </el-form-item>

              <el-form-item label="新密码" prop="newPassword">
                <el-input
                  v-model="passwordForm.newPassword"
                  type="password"
                  show-password
                  placeholder="请输入新密码"
                  @input="checkPasswordStrength"
                >
                  <template #prefix>
                    <i class="el-icon-key"></i>
                  </template>
                </el-input>
                <div class="password-strength-meter">
                  <div class="strength-label">密码强度：</div>
                  <div class="strength-bars">
                    <div 
                      v-for="n in 3" 
                      :key="n"
                      class="strength-bar"
                      :class="[
                        { active: passwordStrengthLevel >= n },
                        strengthLevelClass
                      ]"
                    ></div>
                  </div>
                  <span class="strength-text" :class="strengthLevelClass">
                    {{ passwordStrengthText }}
                  </span>
                </div>
                <div class="password-requirements">
                  <div class="requirement" :class="{ met: hasUpperCase }">
                    <i :class="hasUpperCase ? 'el-icon-check' : 'el-icon-close'"></i>
                    <span>包含大写字母</span>
                  </div>
                  <div class="requirement" :class="{ met: hasLowerCase }">
                    <i :class="hasLowerCase ? 'el-icon-check' : 'el-icon-close'"></i>
                    <span>包含小写字母</span>
                  </div>
                  <div class="requirement" :class="{ met: hasNumber }">
                    <i :class="hasNumber ? 'el-icon-check' : 'el-icon-close'"></i>
                    <span>包含数字</span>
                  </div>
                  <div class="requirement" :class="{ met: hasSpecialChar }">
                    <i :class="hasSpecialChar ? 'el-icon-check' : 'el-icon-close'"></i>
                    <span>包含特殊字符</span>
                  </div>
                  <div class="requirement" :class="{ met: isLengthValid }">
                    <i :class="isLengthValid ? 'el-icon-check' : 'el-icon-close'"></i>
                    <span>长度在8-20个字符之间</span>
                  </div>
                </div>
              </el-form-item>

              <el-form-item label="确认密码" prop="confirmPassword">
                <el-input
                  v-model="passwordForm.confirmPassword"
                  type="password"
                  show-password
                  placeholder="请再次输入新密码"
                >
                  <template #prefix>
                    <i class="el-icon-key"></i>
                  </template>
                </el-input>
              </el-form-item>
            </el-form>

            <template #footer>
              <div class="dialog-footer">
                <el-button @click="cancelPasswordChange">取消</el-button>
                <el-button type="primary" @click="handlePasswordChange" :loading="isSubmitting">
                  确认修改
                </el-button>
              </div>
            </template>
          </el-dialog>

          <!-- 安全问题设置对话框 -->
          <el-dialog
            v-model="showSecurityQuestionsForm"
            :title="securityQuestionsSet ? '修改安全问题' : '设置安全问题'"
            width="500px"
            custom-class="security-questions-dialog"
            :close-on-click-modal="false"
          >
            <el-form
              ref="securityQuestionsRef"
              :model="securityQuestions"
              :rules="securityQuestionRules"
              label-width="100px"
              @submit.prevent="handleSecurityQuestions"
            >
              <div v-for="(question, index) in securityQuestions" :key="index" class="question-group">
                <div class="question-header">
                  <span class="question-number">问题 {{ index + 1 }}</span>
                  <el-button 
                    v-if="index > 0" 
                    type="text" 
                    @click="removeQuestion(index)"
                    class="remove-question"
                  >
                    删除此问题
                  </el-button>
                </div>
                
                <el-form-item 
                  :prop="'questions.' + index + '.selected'"
                  :rules="{ required: true, message: '请选择安全问题', trigger: 'change' }"
                >
                  <el-select 
                    v-model="question.selected"
                    placeholder="请选择安全问题"
                    class="question-select"
                  >
                    <el-option
                      v-for="q in availableQuestions"
                      :key="q.value"
                      :label="q.label"
                      :value="q.value"
                      :disabled="isQuestionSelected(q.value, index)"
                    >
                      <span class="question-option">{{ q.label }}</span>
                    </el-option>
                    <el-option value="custom" label="自定义问题">
                      <span class="question-option">
                        <i class="el-icon-plus"></i>
                        自定义问题
                      </span>
                    </el-option>
                  </el-select>
                </el-form-item>

                <el-form-item
                  v-if="question.selected === 'custom'"
                  :prop="'questions.' + index + '.customQuestion'"
                  :rules="{ required: true, message: '请输入自定义问题', trigger: 'blur' }"
                >
                  <el-input
                    v-model="question.customQuestion"
                    placeholder="请输入自定义问题"
                    maxlength="50"
                    show-word-limit
                  />
                </el-form-item>

                <el-form-item
                  :prop="'questions.' + index + '.answer'"
                  :rules="{ required: true, message: '请输入答案', trigger: 'blur' }"
                >
                  <el-input
                    v-model="question.answer"
                    placeholder="请输入答案"
                    maxlength="30"
                    show-word-limit
                  >
                    <template #prefix>
                      <i class="el-icon-edit"></i>
                    </template>
                  </el-input>
                </el-form-item>
              </div>

              <div class="add-question" v-if="securityQuestions.length < 3">
                <el-button type="text" @click="addQuestion">
                  <i class="el-icon-plus"></i>
                  添加安全问题
                </el-button>
                <span class="question-tip">（最多可设置3个问题）</span>
              </div>

              <div class="security-tips">
                <i class="el-icon-info"></i>
                <div class="tips-content">
                  <p>温馨提示：</p>
                  <ul>
                    <li>请设置容易记住但他人难以猜到的答案</li>
                    <li>答案区分大小写，请牢记您的答案格式</li>
                    <li>建议设置多个安全问题，提高账户安全性</li>
                  </ul>
                </div>
              </div>
            </el-form>

            <template #footer>
              <div class="dialog-footer">
                <el-button @click="cancelSecurityQuestions">取消</el-button>
                <el-button 
                  type="primary" 
                  @click="handleSecurityQuestions"
                  :loading="isSubmitting"
                >
                  确认设置
                </el-button>
              </div>
            </template>
          </el-dialog>
        </div>

        <!-- 语言设置 -->
        <div v-if="selectedTab === 'language'" class="language-settings card">
          <h2><i class="icon-global"></i> 语言设置</h2>
          
          <!-- 快速语言切换 -->
          <div class="quick-language-switch">
            <div class="current-language">
              <span>{{ currentLanguage.name }}</span>
            </div>
            <el-select v-model="selectedLanguage" @change="changeLanguage" class="language-select">
              <el-option
                v-for="lang in languages"
                :key="lang.code"
                :label="lang.name"
                :value="lang.code">
                <div class="language-option">
                  <span>{{ lang.name }}</span>
                </div>
              </el-option>
            </el-select>
          </div>

          <!-- 主要设置区域 -->
          <div class="settings-grid">
            <!-- 区域设置 -->
            <div class="settings-card">
              <div class="card-header">
                <i class="icon-location"></i>
                <h3>区域设置</h3>
              </div>
              <div class="card-content">
                <div class="form-group">
                  <label>国家/地区</label>
                  <el-select v-model="selectedRegion" class="region-select">
                    <el-option
                      v-for="region in regions"
                      :key="region.code"
                      :label="region.name"
                      :value="region.code">
                    </el-option>
                  </el-select>
                </div>
                <div class="form-group">
                  <label>日期格式</label>
                  <el-select v-model="dateFormat">
                    <el-option label="YYYY-MM-DD" value="YYYY-MM-DD"></el-option>
                    <el-option label="MM/DD/YYYY" value="MM/DD/YYYY"></el-option>
                    <el-option label="DD/MM/YYYY" value="DD/MM/YYYY"></el-option>
                  </el-select>
                </div>
                <div class="form-group">
                  <label>时间格式</label>
                  <el-switch
                    v-model="is24Hour"
                    active-text="24小时制"
                    inactive-text="12小时制">
                  </el-switch>
                </div>
              </div>
            </div>

            <!-- 字体设置 -->
            <div class="settings-card">
              <div class="card-header">
                <i class="icon-font"></i>
                <h3>字体设置</h3>
              </div>
              <div class="card-content">
                <div class="form-group">
                  <label>界面字体</label>
                  <el-select v-model="selectedFont" @change="previewFont">
                    <el-option
                      v-for="font in fonts"
                      :key="font.value"
                      :label="font.label"
                      :value="font.value"
                      :style="{ fontFamily: font.value }">
                    </el-option>
                  </el-select>
                </div>
                <div class="form-group">
                  <label>字体大小</label>
                  <el-slider
                    v-model="fontSize"
                    :min="12"
                    :max="24"
                    :step="1"
                    show-input>
                  </el-slider>
                </div>
                <div class="font-preview" :style="{ fontFamily: selectedFont, fontSize: fontSize + 'px' }">
                  字体预览效果 / Font Preview / 123
                </div>
              </div>
            </div>

            <!-- 主题设置 -->
            <div class="settings-card">
              <div class="card-header">
                <i class="icon-theme"></i>
                <h3>主题设置</h3>
              </div>
              <div class="card-content">
                <div class="form-group">
                  <label>显示模式</label>
                  <el-switch
                    v-model="isDarkMode"
                    active-text="暗黑模式"
                    inactive-text="明亮模式">
                  </el-switch>
                </div>
                <div class="theme-colors">
                  <label>主题色彩</label>
                  <div class="color-options">
                    <div
                      v-for="color in themeColors"
                      :key="color"
                      class="color-option"
                      :style="{ backgroundColor: color }"
                      :class="{ active: selectedThemeColor === color }"
                      @click="selectThemeColor(color)">
                    </div>
                  </div>
                </div>
              </div>
            </div>

            <!-- 语言包管理 -->
            <div class="settings-card">
              <div class="card-header">
                <i class="icon-package"></i>
                <h3>语言包管理</h3>
              </div>
              <div class="card-content">
                <div class="language-packages">
                  <div v-for="pack in languagePacks" :key="pack.code" class="package-item">
                    <div class="package-info">
                      <img :src="pack.flag" :alt="pack.name" class="flag-icon" />
                      <span>{{ pack.name }}</span>
                      <el-tag size="small" :type="pack.status === 'installed' ? 'success' : 'info'">
                        {{ pack.status === 'installed' ? '已安装' : '未安装' }}
                      </el-tag>
                    </div>
                    <el-button
                      :type="pack.status === 'installed' ? 'danger' : 'primary'"
                      size="small">
                      {{ pack.status === 'installed' ? '卸载' : '安装' }}
                    </el-button>
                  </div>
                </div>
                <div class="auto-update">
                  <el-checkbox v-model="autoUpdate">自动更新语言包</el-checkbox>
                </div>
              </div>
            </div>
          </div>
        </div>

        <!-- 关于系统 -->
        <div v-if="selectedTab === 'register'" class="system-info card">
          <h2><i class="icon-info"></i> 关于系统</h2>
          <div class="system-details">
            <div class="info-item">
              <span class="label">系统名称</span>
              <span class="value">学生画像系统</span>
            </div>
            <div class="info-item">
              <span class="label">系统版本</span>
              <span class="value">v1.2.3</span>
            </div>
            <div class="info-item">
              <span class="label">开发时间</span>
              <span class="value">2025 年 2 月</span>
            </div>
            <div class="info-item">
              <span class="label">技术架构</span>
              <span class="value">前端：Vue 3 + Element Plus，后端：Spring Boot + MySQL</span>
            </div>
            <div class="info-item">
              <span class="label">最后更新时间</span>
              <span class="value">2025-03-20</span>
            </div>
          </div>
        </div>
      </section>
    </div>

    <!-- 添加单位对话框 -->
    <div v-if="showUnitForm" class="dialog-overlay">
      <div class="dialog-card unit-dialog">
        <h3>{{ isEditingUnit ? '修改单位信息' : '添加单位信息' }}</h3>
        <div class="unit-form">
          <!-- 学校选择 -->
          <div class="form-group">
            <label>学校</label>
            <div class="select-group">
              <el-select 
                v-model="unitForm.school"
                filterable
                placeholder="请选择或输入学校名称"
                :disabled="isEditingUnit">
                <el-option
                  v-for="item in schoolOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
            </div>
          </div>

          <!-- 院系选择 -->
          <div class="form-group">
            <label>院系</label>
            <div class="select-group">
              <el-select 
                v-model="unitForm.department"
                filterable
                placeholder="请选择或输入院系名称">
                <el-option
                  v-for="item in departmentOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
            </div>
          </div>

          <!-- 教师编号 -->
          <div class="form-group">
            <label>教师编号</label>
            <input 
              type="text" 
              v-model="unitForm.teacherId"
              placeholder="请输入教师编号" />
          </div>

          <!-- 职称/职务 -->
          <div class="form-group">
            <label>职称/职务</label>
            <div class="select-group">
              <el-select 
                v-model="unitForm.title"
                filterable
                placeholder="请选择职称/职务">
                <el-option
                  v-for="item in titleOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
            </div>
          </div>
        </div>
        <div class="dialog-actions">
          <button class="cancel-button" @click="cancelUnitEdit">取消</button>
          <button class="confirm-button" 
                  @click="confirmUnitEdit"
                  :disabled="!isUnitFormValid">
            {{ isEditingUnit ? '保存修改' : '确认添加' }}
          </button>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive, watch, onMounted, computed } from 'vue';
import { useRouter } from 'vue-router';
import axios from 'axios';
import {
  ArrowLeftBold,
  User,
  Camera,
  Check,
  EditPen,
  Plus,
  UploadFilled
} from '@element-plus/icons-vue';
import { ElMessage, ElMessageBox } from 'element-plus';

const router = useRouter();

// 响应式数据
const selectedTab = ref('basic');
const isEditingName = ref(false);
const isEditingGender = ref(false);
const isEditingPhone = ref(false);
const isEditingUnit = ref(false);
const showVerificationCode = ref(false);
const verificationCode = ref('');
const countdown = ref(0);
const phoneError = ref('');
const hasChanges = ref(false);
const isPhoneValid = ref(false);

// 头像上传相关
const avatarFile = ref(null);
const avatarPreview = ref('https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png');
const uploadError = ref('');
const maxSize = 5 * 1024 * 1024; // 5MB

// 用户数据
const user = reactive({
  name: '王老师',
  id: '243745166',
  gender: '男',
  phone: '18631768321',
  avatar: 'https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png',
  units: [
    {
      fullName: '华北理工大学 学号/工号:243745166',
      school: '华北理工大学',
      department: '',
      teacherId: '243745166',
      title: ''
    },
    {
      fullName: '华北理工大学马克思主义学院 学号/工号:243745166',
      school: '华北理工大学',
      department: '马克思主义学院',
      teacherId: '243745166',
      title: ''
    }
  ]
});

// 配置数据
const tabs = [
  { id: 'basic', name: '基本资料', icon: 'icon-user' },
  { id: 'changeAvatar', name: '修改头像', icon: 'icon-camera' },
  { id: 'password', name: '密码管理', icon: 'icon-lock' },
  { id: 'language', name: '语言设置', icon: 'icon-adduser' },
  { id: 'register', name: '关于系统', icon: 'icon-global' }
];

const genderOptions = [
  { value: '男', label: '男', icon: 'icon-male' },
  { value: '女', label: '女', icon: 'icon-female' },
  { value: '保密', label: '保密', icon: 'icon-private' }
];

const passwordForm = reactive({
  currentPassword: '',
  newPassword: '',
  confirmPassword: ''
});

const availableQuestions = [
  { value: 'birthplace', label: '您的出生地是？' },
  { value: 'mother', label: '您母亲的姓名是？' },
  { value: 'school', label: '您的小学校名是？' },
  { value: 'pet', label: '您的第一个宠物的名字是？' }
];

const securityQuestions = reactive([
  { selected: '', answer: '' },
  { selected: '', answer: '' },
  { selected: '', answer: '' }
]);

const currentLanguage = reactive({
  name: '简体中文',
  code: 'zh-CN',
  flag: '/flags/cn.png'
});

const languages = [
  { name: '简体中文', code: 'zh-CN', flag: '/flags/cn.png' },
  { name: 'English', code: 'en-US', flag: '/flags/us.png' },
  { name: '日本語', code: 'ja-JP', flag: '/flags/jp.png' }
];

const regions = [
  { name: '中国大陆', code: 'CN' },
  { name: '中国香港', code: 'HK' },
  { name: '中国台湾', code: 'TW' }
];

const fonts = [
  { label: '微软雅黑', value: 'Microsoft YaHei' },
  { label: '宋体', value: 'SimSun' },
  { label: 'Arial', value: 'Arial' }
];

const themeColors = [
  '#409EFF',
  '#67C23A',
  '#E6A23C',
  '#F56C6C',
  '#909399'
];

const languagePacks = [
  { name: '简体中文', code: 'zh-CN', flag: '/flags/cn.png', status: 'installed' },
  { name: 'English', code: 'en-US', flag: '/flags/us.png', status: 'not-installed' },
  { name: '日本語', code: 'ja-JP', flag: '/flags/jp.png', status: 'not-installed' }
];

// 原始数据备份
const originalData = reactive({
  name: '',
  gender: '',
  phone: '',
  units: []
});

// 单位表单数据
const unitForm = reactive({
  school: '',
  department: '',
  teacherId: '',
  title: ''
});

// 选项数据
const schoolOptions = [
  { value: '华北理工大学', label: '华北理工大学' },
  // 可以从后端获取更多选项
];

const departmentOptions = [
  { value: '马克思主义学院', label: '马克思主义学院' },
  { value: '计算机科学与技术学院', label: '计算机科学与技术学院' },
  { value: '经济管理学院', label: '经济管理学院' },
  // 可以从后端获取更多选项
];

const titleOptions = [
  { value: '教授', label: '教授' },
  { value: '副教授', label: '副教授' },
  { value: '讲师', label: '讲师' },
  { value: '助教', label: '助教' },
  // 可以添加更多职称选项
];

// 状态变量
const showUnitForm = ref(false);
const currentEditingUnitIndex = ref(-1);
const canSaveChanges = ref(true);

// 表单验证
const isUnitFormValid = computed(() => {
  return unitForm.school && 
         unitForm.department && 
         unitForm.teacherId && 
         unitForm.title;
});

// 方法
const goBack = () => {
  router.go(-1);
};

const toggleNameEdit = () => {
  if (isEditingName.value) {
    // 保存更改
    hasChanges.value = true;
  }
  isEditingName.value = !isEditingName.value;
};

const toggleGenderEdit = () => {
  if (isEditingGender.value) {
    // 保存更改
    hasChanges.value = true;
  }
  isEditingGender.value = !isEditingGender.value;
};

const togglePhoneEdit = () => {
  if (!isEditingPhone.value) {
    // 备份原始手机号
    originalData.phone = user.phone;
  }
  isEditingPhone.value = !isEditingPhone.value;
};

const verifyPhone = async () => {
  try {
    // 发送验证码
    await axios.post('/api/user/phone/verify', {
      phone: user.phone
    });
    
    showVerificationCode.value = true;
    countdown.value = 60;
    const timer = setInterval(() => {
      countdown.value--;
      if (countdown.value <= 0) {
        clearInterval(timer);
      }
    }, 1000);
    
    ElMessage.success('验证码已发送');
  } catch (error) {
    ElMessage.error(error.message || '验证码发送失败');
  }
};

const editUnit = (index) => {
  currentEditingUnitIndex.value = index;
  const unit = user.units[index];
  unitForm.school = unit.school;
  unitForm.department = unit.department;
  unitForm.teacherId = unit.teacherId;
  unitForm.title = unit.title || '';
  isEditingUnit.value = true;
  showUnitForm.value = true;
};

const copyToClipboard = (text) => {
  navigator.clipboard.writeText(text).then(() => {
    ElMessage.success('已复制到剪贴板');
  }).catch(() => {
    ElMessage.error('复制失败');
  });
};

const showPrivacyPolicy = () => {
  // 实现显示隐私政策的逻辑
};

const saveChanges = async () => {
  try {
    // 保存所有更改
    const response = await axios.post('/api/user/profile/update', {
      name: user.name,
      gender: user.gender,
      phone: user.phone,
      units: user.units
    });
    
    if (response.data.code === 200) {
      // 更新成功
      hasChanges.value = false;
      ElMessage.success('保存成功');
      
      // 更新原始数据
      Object.assign(originalData, {
        name: user.name,
        gender: user.gender,
        phone: user.phone,
        units: [...user.units]
      });
      
      // 重置编辑状态
      isEditingName.value = false;
      isEditingGender.value = false;
      isEditingPhone.value = false;
      isEditingUnit.value = false;
    } else {
      throw new Error(response.data.message || '保存失败');
    }
  } catch (error) {
    ElMessage.error(error.message || '保存失败，请重试');
  }
};

// 监听变化
watch(
  () => ({
    name: user.name,
    gender: user.gender,
    phone: user.phone,
    units: user.units
  }),
  (newVal) => {
    hasChanges.value = JSON.stringify(newVal) !== JSON.stringify({
      name: originalData.name,
      gender: originalData.gender,
      phone: originalData.phone,
      units: originalData.units
    });
  },
  { deep: true }
);

// 初始化原始数据
onMounted(() => {
  Object.assign(originalData, {
    name: user.name,
    gender: user.gender,
    phone: user.phone,
    units: [...user.units]
  });
});

const showUnitDialog = () => {
  isEditingUnit.value = false;
  currentEditingUnitIndex.value = -1;
  // 重置表单
  Object.keys(unitForm).forEach(key => {
    unitForm[key] = '';
  });
  showUnitForm.value = true;
};

const cancelUnitEdit = () => {
  showUnitForm.value = false;
  isEditingUnit.value = false;
  currentEditingUnitIndex.value = -1;
};

const confirmUnitEdit = async () => {
  if (!isUnitFormValid.value) {
    ElMessage.error('请填写完整的单位信息');
    return;
  }

  try {
    const unitInfo = {
      fullName: unitForm.department 
        ? `${unitForm.school} ${unitForm.department} 学号/工号:${unitForm.teacherId}`
        : `${unitForm.school} 学号/工号:${unitForm.teacherId}`,
      school: unitForm.school,
      department: unitForm.department,
      teacherId: unitForm.teacherId,
      title: unitForm.title
    };

    if (isEditingUnit.value) {
      // 修改现有单位
      user.units[currentEditingUnitIndex.value] = unitInfo;
    } else {
      // 添加新单位
      user.units.push(unitInfo);
    }

    showUnitForm.value = false;
    isEditingUnit.value = false;
    currentEditingUnitIndex.value = -1;
    ElMessage.success(isEditingUnit.value ? '单位信息修改成功' : '单位添加成功');
  } catch (error) {
    ElMessage.error(error.message || '操作失败，请重试');
  }
};

const uploadAvatar = async () => {
  if (!avatarFile.value) return;
  
  try {
    const formData = new FormData();
    formData.append('avatar', avatarFile.value);
    
    // 显示上传进度
    ElMessage({
      message: '头像上传中...',
      type: 'info',
      duration: 0
    });
    
    // 调用后端API上传头像
    const response = await axios.post('/api/user/avatar', formData, {
      headers: {
        'Content-Type': 'multipart/form-data'
      }
    });
    
    if (response.data.code === 200) {
      // 更新用户头像
      user.avatar = response.data.data.avatarUrl;
      avatarPreview.value = response.data.data.avatarUrl;
      avatarFile.value = null;
      
      ElMessage.closeAll();
      ElMessage.success('头像上传成功');
    } else {
      throw new Error(response.data.message || '上传失败');
    }
  } catch (error) {
    ElMessage.closeAll();
    uploadError.value = error.message || '头像上传失败，请重试';
    ElMessage.error(uploadError.value);
  }
};

const resetAvatar = () => {
  ElMessageBox.confirm(
    '确定要恢复原始头像吗？',
    '提示',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
    }
  ).then(async () => {
    try {
      // 调用后端API重置头像
      const response = await axios.post('/api/user/avatar/reset');
      
      if (response.data.code === 200) {
        avatarFile.value = null;
        avatarPreview.value = response.data.data.defaultAvatarUrl;
        user.avatar = response.data.data.defaultAvatarUrl;
        uploadError.value = '';
        ElMessage.success('已恢复原始头像');
      } else {
        throw new Error(response.data.message || '重置失败');
      }
    } catch (error) {
      uploadError.value = error.message || '恢复头像失败，请重试';
      ElMessage.error(uploadError.value);
    }
  }).catch(() => {});
};

// 添加文件大小格式化函数
const formatFileSize = (bytes) => {
  if (bytes === 0) return '0 B';
  const k = 1024;
  const sizes = ['B', 'KB', 'MB', 'GB'];
  const i = Math.floor(Math.log(bytes) / Math.log(k));
  return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];
};

const validateFile = (file) => {
  uploadError.value = '';
  
  if (!file.type.match(/^image\/(jpeg|png)$/)) {
    uploadError.value = '只支持 JPG、PNG 格式的图片';
    return false;
  }
  
  if (file.size > maxSize) {
    uploadError.value = `图片大小不能超过 ${formatFileSize(maxSize)}`;
    return false;
  }
  
  // 检查图片尺寸
  return new Promise((resolve) => {
    const img = new Image();
    img.src = URL.createObjectURL(file);
    img.onload = () => {
      URL.revokeObjectURL(img.src);
      if (img.width < 100 || img.height < 100) {
        uploadError.value = '图片尺寸不能小于 100x100 像素';
        resolve(false);
      } else if (img.width > 2000 || img.height > 2000) {
        uploadError.value = '图片尺寸不能大于 2000x2000 像素';
        resolve(false);
      } else {
        resolve(true);
      }
    };
    img.onerror = () => {
      URL.revokeObjectURL(img.src);
      uploadError.value = '图片加载失败，请检查文件是否损坏';
      resolve(false);
    };
  });
};

const handleFileSelect = async (e) => {
  const file = e.target.files[0];
  if (file) {
    const isValid = await validateFile(file);
    if (isValid) {
    avatarFile.value = file;
    avatarPreview.value = URL.createObjectURL(file);
    }
  }
};

const handleDrop = async (e) => {
  isDragging.value = false;
  e.preventDefault();
  const file = e.dataTransfer.files[0];
  if (file) {
    const isValid = await validateFile(file);
    if (isValid) {
    avatarFile.value = file;
    avatarPreview.value = URL.createObjectURL(file);
    }
  }
};

const showChangePasswordDialog = () => {
  showPasswordDialog.value = true;
};

const cancelPasswordChange = () => {
  showPasswordDialog.value = false;
  passwordForm.currentPassword = '';
  passwordForm.newPassword = '';
  passwordForm.confirmPassword = '';
};

const handlePasswordChange = async () => {
  try {
    await passwordFormRef.value.validate();
    isSubmitting.value = true;
    
    // 模拟API调用
    await new Promise(resolve => setTimeout(resolve, 1000));
    
    ElMessage.success('密码修改成功，请重新登录');
    showPasswordDialog.value = false;
    // 这里可以添加登出逻辑
    
  } catch (error) {
    console.error('密码修改失败:', error);
    ElMessage.error('密码修改失败，请重试');
  } finally {
    isSubmitting.value = false;
  }
};

const openSecurityQuestionsForm = () => {
  showSecurityQuestionsForm.value = true;
};

const cancelSecurityQuestions = () => {
  showSecurityQuestionsForm.value = false;
  securityQuestions.forEach(q => {
    q.selected = '';
    q.answer = '';
  });
};

const handleSecurityQuestions = async () => {
  try {
    await securityQuestionsRef.value.validate();
    isSubmitting.value = true;
    
    // 模拟API调用
    await new Promise(resolve => setTimeout(resolve, 1000));
    
    securityQuestionsSet.value = true;
    ElMessage.success('安全问题设置成功');
    showSecurityQuestionsForm.value = false;
    
  } catch (error) {
    console.error('安全问题设置失败:', error);
    ElMessage.error('安全问题设置失败，请重试');
  } finally {
    isSubmitting.value = false;
  }
};

const toggleTwoFactor = (value) => {
  if (value) {
    showTwoFactorDialog.value = true;
    twoFactorEnabled.value = false; // 等待验证成功后再启用
  } else {
    ElMessageBox.confirm(
      '确定要关闭双因素认证吗？关闭后账户安全性将降低。',
      '关闭双因素认证',
      {
        confirmButtonText: '确定关闭',
        cancelButtonText: '取消',
        type: 'warning',
      }
    ).then(() => {
      twoFactorEnabled.value = false;
      ElMessage.success('已关闭双因素认证');
    }).catch(() => {
      twoFactorEnabled.value = true;
    });
  }
};

const sendVerificationCode = () => {
  // TODO: 实现发送验证码的逻辑
  countdown.value = 60;
  const timer = setInterval(() => {
    countdown.value--;
    if (countdown.value <= 0) {
      clearInterval(timer);
    }
  }, 1000);
  ElMessage.success('验证码已发送，请注意查收');
};

const cancelTwoFactorSetup = () => {
  showTwoFactorDialog.value = false;
  verificationCode.value = '';
  countdown.value = 0;
  twoFactorEnabled.value = false;
};

const confirmTwoFactorSetup = () => {
  // TODO: 实现验证码验证逻辑
  if (verificationCode.value.length === 6) {
    twoFactorEnabled.value = true;
    showTwoFactorDialog.value = false;
    ElMessage.success('双因素认证已开启');
  } else {
    ElMessage.error('请输入正确的验证码');
  }
};

const changeLanguage = (value) => {
  console.log('切换语言:', value);
};

const previewFont = (value) => {
  console.log('预览字体:', value);
};

const selectThemeColor = (color) => {
  selectedThemeColor.value = color;
};

// 手机号编辑相关
const originalPhone = ref('');

// 手机号验证和编辑处理
const validatePhone = () => {
  const phoneRegex = /^1[3-9]\d{9}$/;
  if (!user.phone) {
    phoneError.value = '手机号不能为空';
    return false;
  }
  if (!phoneRegex.test(user.phone)) {
    phoneError.value = '请输入正确的11位手机号码';
    return false;
  }
  phoneError.value = '';
  return true;
};

const handlePhoneEdit = async () => {
  if (isEditingPhone.value) {
    // 保存手机号
    if (!validatePhone()) {
      ElMessage.error(phoneError.value);
      return;
    }
    try {
      // 这里可以添加与后端的交互
      // await axios.post('/api/user/phone/update', { phone: user.phone });
      
      isEditingPhone.value = false;
      ElMessage.success('手机号修改成功');
      originalPhone.value = user.phone;
    } catch (error) {
      ElMessage.error(error.message || '保存失败，请重试');
      user.phone = originalPhone.value; // 恢复原始手机号
    }
  } else {
    // 进入编辑模式
    originalPhone.value = user.phone; // 保存原始手机号
    isEditingPhone.value = true;
  }
};

// 监听手机号变化
watch(() => user.phone, (newValue) => {
  if (isEditingPhone.value) {
    validatePhone();
  }
});

// 密码管理相关
const securityLevel = ref(2);
const daysSinceLastChange = ref(30);
const isSubmitting = ref(false);
const securityQuestionsSet = ref(false);
const passwordStrengthLevel = ref(0);
const strengthLevelClass = computed(() => {
  switch (passwordStrengthLevel.value) {
    case 0: return 'weak';
    case 1: return 'medium';
    case 2: return 'medium';
    case 3: return 'strong';
    default: return '';
  }
});

// 检查密码强度
const checkPasswordStrength = () => {
  const password = passwordForm.newPassword;
  let score = 0;
  
  if (hasUpperCase.value) score++;
  if (hasLowerCase.value) score++;
  if (hasNumber.value) score++;
  if (hasSpecialChar.value) score++;
  if (isLengthValid.value) score++;
  
  if (score <= 2) passwordStrengthLevel.value = 1;
  else if (score <= 4) passwordStrengthLevel.value = 2;
  else passwordStrengthLevel.value = 3;
};

// 安全问题相关
const securityQuestionRules = {
  selected: [{ required: true, message: '请选择安全问题', trigger: 'change' }],
  answer: [{ required: true, message: '请输入答案', trigger: 'blur' }]
};

const addQuestion = () => {
  if (securityQuestions.length < 3) {
    securityQuestions.push({
      selected: '',
      customQuestion: '',
      answer: ''
    });
  }
};

const removeQuestion = (index) => {
  securityQuestions.splice(index, 1);
};

const isQuestionSelected = (value, currentIndex) => {
  return securityQuestions.some((q, index) => 
    index !== currentIndex && q.selected === value && value !== 'custom'
  );
};
</script>

<style lang="less" scoped>
@import url('//at.alicdn.com/t/c/font_1234567_abcdefghij.css');

.account-management {
  --primary-color: #409eff;
  --hover-color: #3375b9;
  --active-color: #2a598a;
  --secondary-color: #ecf5ff;
  --text-color: #34495e;
  --border-color: #dcdfe6;
  --background-color: #f8f9fa;

  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  color: var(--text-color);

  .header {
    background: linear-gradient(135deg, var(--primary-color), var(--hover-color));
    padding: 1rem 2rem;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);

    .header-content {
      max-width: 1200px;
      margin: 0 auto;
      display: flex;
      justify-content: space-between;
      align-items: center;

      .header-left {
        display: flex;
        align-items: center;
        gap: 1rem;

        .back-button {
          width: 32px;
          height: 32px;
          border-radius: 50%;
          display: flex;
          align-items: center;
          justify-content: center;
          cursor: pointer;
          transition: all 0.3s ease;
          background: rgba(255, 255, 255, 0.1);
          border: none;

          i {
            color: white;
            font-size: 18px;
          }

          &:hover {
            background: rgba(255, 255, 255, 0.2);
            transform: translateX(-2px);
          }
        }

        h1 {
          color: white;
          margin: 0;
          font-weight: 500;
        }
      }

      .user-brief {
        display: flex;
        align-items: center;
        gap: 1rem;
        color: white;

        .user-avatar {
          width: 40px;
          height: 40px;
          border-radius: 50%;
          border: 2px solid white;
        }
      }
    }
  }

  .main-content {
    display: grid;
    grid-template-columns: 240px 1fr;
    max-width: 1200px;
    margin: 2rem auto;
    gap: 2rem;

    .sidebar {
      background: white;
      border-radius: 8px;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);

      ul {
        padding: 1rem 0;

        li {
          padding: 1rem 2rem;
          cursor: pointer;
          transition: all 0.3s ease;
          display: flex;
          align-items: center;
          gap: 1rem;
          color: var(--text-color);

          &:hover {
            background: var(--secondary-color);
          }

          &.active {
            background: var(--primary-color);
            color: white;
            position: relative;

            &::after {
              content: "";
              position: absolute;
              right: 0;
              top: 50%;
              transform: translateY(-50%);
              border: 8px solid transparent;
              border-right-color: white;
            }
          }
        }
      }
    }

    .content {
      .card {
        background: white;
        border-radius: 8px;
        padding: 2rem;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);

        h2 {
          margin-top: 0;
          display: flex;
          align-items: center;
          gap: 0.5rem;
          color: var(--primary-color);
        }
      }

      .basic-info {
        .info-section {
          margin-bottom: 2rem;
          padding: 1.5rem;
          background: var(--background-color);
          border-radius: 8px;
          box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);

          h3 {
            margin: 0 0 1.5rem;
            font-size: 1.2rem;
            color: var(--text-color);
            padding-bottom: 0.5rem;
            border-bottom: 1px solid var(--border-color);
          }
        }

        .info-form {
          margin-bottom: 2.5rem;

      .form-row {
        margin-bottom: 1.5rem;
            padding: 1rem;
            background: white;
            border: 1px solid var(--border-color);
            border-radius: 8px;
            transition: all 0.3s ease;

            &:hover {
              border-color: var(--primary-color);
              box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
            }

        label {
          display: block;
              margin-bottom: 0.8rem;
              color: var(--text-color);
          font-weight: 500;
        }

            .input-group {
              display: flex;
              gap: 1rem;
              align-items: center;

              input {
                flex: 1;
                height: 40px;
                padding: 0 1rem;
                border: 1px solid var(--border-color);
                border-radius: 8px;
                font-size: 1rem;
                transition: all 0.3s ease;
                background: white;

                &.editable {
                  border-color: var(--primary-color);
                }

                &:focus {
                  outline: none;
                  border-color: var(--primary-color);
                  box-shadow: 0 0 0 3px rgba(64, 158, 255, 0.1);
                }

                &[readonly] {
                  background: #f8f9fa;
                  cursor: not-allowed;
                }
              }

              .icon-button {
                width: 40px;
                height: 40px;
                display: flex;
                align-items: center;
                justify-content: center;
                border: 1px solid var(--border-color);
                border-radius: 8px;
                background: white;
                color: var(--text-color);
                transition: all 0.3s ease;

                &:hover {
                  border-color: var(--primary-color);
                  color: var(--primary-color);
                }
              }

              .verify-button {
                min-width: 120px;
                height: 40px;
                background: var(--primary-color);
                color: white;
                border: none;
                border-radius: 8px;
                font-size: 0.9rem;
                cursor: pointer;
                transition: all 0.3s ease;

                &:disabled {
                  background: #ccc;
                  cursor: not-allowed;
                }

                &:hover:not(:disabled) {
                  background: var(--hover-color);
                }
              }
        }

        .radio-group {
          display: flex;
          gap: 1rem;

          .radio-button {
            padding: 0.5rem 1.5rem;
            border: 1px solid var(--border-color);
            border-radius: 20px;
            cursor: pointer;
            transition: all 0.3s ease;
                display: flex;
                align-items: center;
                gap: 0.5rem;
                background: white;

                i {
                  font-size: 1.2rem;
                }

            &.active {
              background: var(--primary-color);
              color: white;
              border-color: var(--primary-color);
            }

                &.disabled {
                  cursor: not-allowed;
                  opacity: 0.7;
                }
              }
            }

            .readonly-field {
              padding: 0.8rem 1rem;
              background: #f8f9fa;
              border-radius: 8px;
              color: var(--text-color);
              border: 1px solid var(--border-color);
              font-size: 1rem;
            }
          }
        }
      }

      .unit-list {
        .unit-item {
          display: flex;
          justify-content: space-between;
          align-items: center;
          padding: 1rem;
          background: white;
            border: 1px solid var(--border-color);
          border-radius: 8px;
          margin-bottom: 0.5rem;
          transition: all 0.3s ease;

          &:hover {
              border-color: var(--primary-color);
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
          }

          .unit-content {
            display: flex;
            align-items: center;
            gap: 0.5rem;

            i {
              color: var(--primary-color);
            }
          }

          .unit-actions {
            display: flex;
            gap: 0.5rem;

          .icon-button {
              width: 32px;
              height: 32px;
              display: flex;
              align-items: center;
              justify-content: center;
              border: 1px solid var(--border-color);
              border-radius: 8px;
              background: white;
              transition: all 0.3s ease;

              &:hover {
                border-color: var(--primary-color);
                color: var(--primary-color);
              }

              &.delete {
                color: #f56c6c;

                &:hover {
                  border-color: #f56c6c;
                  background: #fef0f0;
                }
              }
            }
          }
        }

        .add-button {
          width: 100%;
          padding: 1rem;
          background: white;
          border: 1px dashed var(--border-color);
          border-radius: 8px;
            color: var(--text-color);
          display: flex;
          align-items: center;
          justify-content: center;
          gap: 0.5rem;
          transition: all 0.3s ease;
          cursor: pointer;

            &:hover {
            border-color: var(--primary-color);
              color: var(--primary-color);
            }
          }
        }

      .form-actions {
        margin-top: 2rem;
        padding-top: 2rem;
        border-top: 1px solid var(--border-color);
          display: flex;
        justify-content: flex-end;

        .primary-button {
          min-width: 120px;
          height: 40px;
          display: flex;
          align-items: center;
          justify-content: center;
          gap: 0.5rem;
          background: var(--primary-color);
          color: white;
          border: none;
          border-radius: 8px;
          font-size: 1rem;
          cursor: pointer;
          transition: all 0.3s ease;

          &:disabled {
            background: #ccc;
            cursor: not-allowed;
          }

          &:hover:not(:disabled) {
            background: var(--hover-color);
            transform: translateY(-1px);
          }

          &:active:not(:disabled) {
            transform: translateY(0);
          }

          i {
            font-size: 1.2rem;
          }
        }
      }

      .privacy-notice {
        margin-top: 2rem;
        padding: 1rem;
        background: #f8f9fa;
        border-radius: 8px;
            display: flex;
            align-items: center;
        gap: 0.5rem;
        font-size: 0.9rem;
        color: #666;

        i {
          color: var(--primary-color);
        }

        a {
          color: var(--primary-color);
          text-decoration: none;

          &:hover {
            text-decoration: underline;
          }
        }
      }
    }

    .avatar-upload {
      .upload-area {
        margin: 2rem 0;
        
        .avatar-preview {
          width: 200px;
          height: 200px;
          margin: 0 auto;
          border-radius: 8px;
          border: 2px dashed var(--border-color);
          position: relative;
          overflow: hidden;
          transition: all 0.3s ease;
          
          &.is-dragging {
            border-color: var(--primary-color);
            background: rgba(64, 158, 255, 0.1);
          }
          
          img {
            width: 100%;
            height: 100%;
            object-fit: cover;
          }
          
          .empty-avatar {
            width: 100%;
            height: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
            background: var(--background-color);
            
            i {
              font-size: 64px;
              color: var(--border-color);
            }
          }
          
          .upload-mask {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: rgba(0, 0, 0, 0.6);
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            color: white;
            opacity: 0;
            transition: opacity 0.3s ease;
            
            &.is-dragging {
              opacity: 1;
              background: rgba(64, 158, 255, 0.8);
            }
            
            i {
              font-size: 32px;
              margin-bottom: 1rem;
            }
            
            p {
              margin: 0 0 0.5rem;
              font-size: 1rem;
            }
            
            .upload-tip {
              font-size: 0.8rem;
              opacity: 0.8;
            }
          }
          
          &:hover .upload-mask {
            opacity: 1;
          }
        }
      }
      
      .upload-error {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        color: #f56c6c;
        margin: 1rem 0;
        padding: 0.5rem 1rem;
        background: #fef0f0;
            border-radius: 4px;

        i {
          font-size: 1.2rem;
        }
      }
      
      .avatar-actions {
        display: flex;
        justify-content: center;
        gap: 1rem;
        margin-top: 2rem;
        
        button {
          min-width: 120px;
          height: 40px;
          display: flex;
          align-items: center;
          justify-content: center;
          gap: 0.5rem;
          font-size: 1rem;
          border-radius: 4px;
          transition: all 0.3s ease;
          
          i {
            font-size: 1.2rem;
          }
          
          &:disabled {
            opacity: 0.6;
            cursor: not-allowed;
          }
          
          &.primary-button {
            background: var(--primary-color);
            color: white;
            border: none;
            
            &:hover:not(:disabled) {
              background: var(--hover-color);
              transform: translateY(-1px);
            }
            
            &:active:not(:disabled) {
              transform: translateY(0);
            }
          }
          
          &.secondary-button {
            background: none;
            border: 1px solid var(--border-color);
              color: var(--text-color);

              &:hover {
              border-color: var(--primary-color);
                color: var(--primary-color);
            }
          }
        }
      }
    }

    .password-management {
      .security-info {
        .security-header {
          background: linear-gradient(135deg, #409EFF, #2D5C8A);
          color: white;
          padding: 2rem;
          border-radius: 12px;
          margin-bottom: 2rem;
          box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);

          .user-info {
            display: flex;
            align-items: center;
            gap: 2rem;

            .user-avatar {
              width: 80px;
              height: 80px;
              border-radius: 50%;
              border: 3px solid rgba(255, 255, 255, 0.2);
              box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
            }

            .user-details {
              flex: 1;

              h3 {
                margin: 0;
                font-size: 1.5rem;
                font-weight: 500;
              }

              .last-modified {
                margin: 0.5rem 0;
                opacity: 0.8;
                font-size: 0.9rem;
              }

              .security-level {
                display: flex;
                align-items: center;
                gap: 1rem;
            margin-top: 0.5rem;

                .level-text {
                  font-size: 0.9rem;
                  opacity: 0.9;
                }
              }
            }
          }
        }

        .security-actions {
          display: grid;
          grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
          gap: 2rem;

          .action-card {
            background: white;
            border-radius: 12px;
            padding: 1.5rem;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
            transition: all 0.3s ease;

            &:hover {
              transform: translateY(-2px);
              box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
            }

            .action-header {
              display: flex;
              align-items: center;
              gap: 1rem;
              margin-bottom: 1.5rem;
              padding-bottom: 1rem;
              border-bottom: 1px solid #EBEEF5;

              i {
                font-size: 1.8rem;
                color: #409EFF;
              }

              h3 {
                margin: 0;
                font-size: 1.2rem;
                color: #303133;
                font-weight: 500;
              }
            }

            .action-content {
              .description {
                color: #606266;
                margin-bottom: 1.5rem;
                line-height: 1.5;
              }

              .last-change, .status-info {
                display: flex;
                align-items: center;
                gap: 0.5rem;
                margin-bottom: 1.5rem;
                color: #909399;
                font-size: 0.9rem;

                i {
                  font-size: 1.1rem;
                  
                  &.el-icon-success {
                    color: #67C23A;
                  }
                  
                  &.el-icon-warning {
                    color: #E6A23C;
                  }
                }
              }

              .action-button {
                width: 100%;
                display: flex;
                align-items: center;
                justify-content: center;
                gap: 0.5rem;
                height: 40px;
                font-size: 0.95rem;

                i {
                  font-size: 1.1rem;
                }
              }
            }
          }
        }
      }
    }
  }

  .dialog-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;

    .dialog-card {
      background: white;
      padding: 2rem;
      border-radius: 8px;
      width: 500px;
      max-width: 90vw;
      max-height: 90vh;
      overflow-y: auto;

      h3 {
        margin: 0 0 1.5rem;
        font-size: 1.5rem;
        color: var(--text-color);
        text-align: center;
      }

      .form-group {
        margin-bottom: 1.5rem;
        background: var(--background-color);
        padding: 1.5rem;
        border-radius: 8px;
        border: 1px solid var(--border-color);
        box-sizing: border-box;

        label {
          display: block;
          margin-bottom: 0.8rem;
          color: var(--text-color);
          font-weight: 500;
          font-size: 1rem;
        }

        select {
          width: 100%;
          height: 48px;
          padding: 0 1rem;
          border: 2px solid var(--border-color);
          border-radius: 8px;
          font-size: 1rem;
          color: var(--text-color);
          background-color: white;
          cursor: pointer;
          transition: all 0.3s ease;
          margin-bottom: 1rem;
          box-sizing: border-box;

          &:focus {
            outline: none;
            border-color: var(--primary-color);
            box-shadow: 0 0 0 3px rgba(64, 158, 255, 0.1);
          }

          &:hover {
            border-color: var(--primary-color);
          }
        }

        input {
          width: 100%;
          height: 48px;
          padding: 0 1rem;
          border: 2px solid var(--border-color);
          border-radius: 8px;
          font-size: 1rem;
          transition: all 0.3s ease;
          box-sizing: border-box;

          &:focus {
            outline: none;
            border-color: var(--primary-color);
            box-shadow: 0 0 0 3px rgba(64, 158, 255, 0.1);
          }

          &::placeholder {
            color: #999;
            font-size: 0.9rem;
          }
        }
      }

      .dialog-actions {
        display: flex;
        justify-content: flex-end;
        gap: 1rem;
        margin-top: 2rem;
        padding-top: 1rem;
        border-top: 1px solid var(--border-color);

        button {
          min-width: 120px;
          height: 48px;
          font-size: 1rem;
          border-radius: 8px;
          transition: all 0.3s ease;
          display: flex;
          align-items: center;
          justify-content: center;
          box-sizing: border-box;

          &.cancel-button {
          background: none;
          color: var(--text-color);
            border: 2px solid var(--border-color);

            &:hover {
              border-color: var(--primary-color);
              color: var(--primary-color);
            }
          }

          &.confirm-button {
            background: var(--primary-color);
            color: white;
            border: none;

            &:hover {
              background: var(--hover-color);
              transform: translateY(-1px);
            }

            &:active {
              transform: translateY(0);
            }
          }
        }
      }
    }
  }

  .verification-setup {
    .method-selector {
      margin-bottom: 1.5rem;

      h4 {
        margin: 0 0 1rem;
        color: var(--text-color);
      }

      .method-options {
        display: flex;
        gap: 1rem;

        .method-option {
          flex: 1;
          padding: 1rem;
          border: 1px solid var(--border-color);
          border-radius: 8px;
          cursor: pointer;
          transition: all 0.3s ease;
          display: flex;
          align-items: center;
          gap: 0.5rem;

          i {
            font-size: 1.2rem;
            color: var(--primary-color);
          }

          &:hover {
            border-color: var(--primary-color);
          }

          &.active {
            background: var(--secondary-color);
            border-color: var(--primary-color);
            color: var(--primary-color);
          }
        }
      }
    }

    .verification-info {
      margin-bottom: 1.5rem;
      padding: 1rem;
      background: var(--background-color);
      border-radius: 8px;

      p {
        margin: 0;
        color: var(--text-color);

        &.contact-info {
          margin-top: 0.5rem;
          font-weight: 500;
          color: var(--primary-color);
        }
      }
    }

    .verification-input {
      margin-bottom: 1.5rem;

      .input-group {
        display: flex;
        gap: 1rem;

        input {
          flex: 1;
          height: 48px;
          font-size: 16px;
          padding: 0 1rem;
          border: 2px solid var(--border-color);
          border-radius: 8px;
          transition: all 0.3s ease;

          &:focus {
            border-color: var(--primary-color);
            box-shadow: 0 0 0 3px rgba(64, 158, 255, 0.1);
          }

          &::placeholder {
            color: #999;
            font-size: 14px;
          }
        }

        .send-code-btn {
          min-width: 120px;
          height: 48px;
          font-size: 14px;
          background: var(--primary-color);
          color: white;
          border: none;
          border-radius: 8px;
          cursor: pointer;
          transition: all 0.3s ease;
          display: flex;
          align-items: center;
          justify-content: center;

          &:hover:not(:disabled) {
            background: var(--hover-color);
            transform: translateY(-1px);
          }

          &:active:not(:disabled) {
            transform: translateY(0);
          }

          &:disabled {
            background: #ccc;
            cursor: not-allowed;
          }
        }
      }
    }
  }

  .language-settings {
    .quick-language-switch {
      display: flex;
      align-items: center;
      gap: 1rem;
      margin-bottom: 2rem;
      padding: 1rem;
      background: var(--background-color);
      border-radius: 8px;

      .current-language {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        padding-right: 1rem;
        border-right: 1px solid var(--border-color);

        .flag-icon {
          width: 24px;
          height: 24px;
          border-radius: 4px;
        }
      }

      .language-select {
        flex: 1;
        max-width: 300px;
      }
    }

    .settings-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
      gap: 2rem;
      margin-top: 2rem;

      .settings-card {
        background: var(--background-color);
        border-radius: 8px;
        border: 1px solid var(--border-color);
        overflow: hidden;

        .card-header {
          display: flex;
          align-items: center;
          gap: 0.5rem;
          padding: 1rem;
          background: rgba(64, 158, 255, 0.1);
          border-bottom: 1px solid var(--border-color);

          i {
            font-size: 1.2rem;
            color: var(--primary-color);
          }

          h3 {
            margin: 0;
            font-size: 1rem;
            color: var(--text-color);
          }
        }

        .card-content {
          padding: 1.5rem;

          .form-group {
            margin-bottom: 1.5rem;

            &:last-child {
              margin-bottom: 0;
            }

            label {
              display: block;
              margin-bottom: 0.5rem;
              color: var(--text-color);
              font-weight: 500;
            }
          }

          .font-preview {
            margin-top: 1rem;
            padding: 1rem;
            border: 1px solid var(--border-color);
            border-radius: 4px;
            text-align: center;
          }

          .theme-colors {
            .color-options {
              display: flex;
              gap: 1rem;
              margin-top: 0.5rem;

              .color-option {
                width: 32px;
                height: 32px;
                border-radius: 4px;
                cursor: pointer;
                transition: all 0.3s ease;
                border: 2px solid transparent;

                &.active {
                  border-color: var(--primary-color);
                  transform: scale(1.1);
                }

                &:hover {
                  transform: scale(1.1);
                }
              }
            }
          }

          .language-packages {
            .package-item {
              display: flex;
              justify-content: space-between;
              align-items: center;
              padding: 0.5rem;
              border-bottom: 1px solid var(--border-color);

              &:last-child {
                border-bottom: none;
              }

              .package-info {
                display: flex;
                align-items: center;
                gap: 0.5rem;

                .flag-icon {
                  width: 20px;
                  height: 20px;
                  border-radius: 4px;
                }
              }
            }
          }

          .auto-update {
            margin-top: 1rem;
            padding-top: 1rem;
            border-top: 1px solid var(--border-color);
          }
        }
      }
    }
  }

  .language-option {
    display: flex;
    align-items: center;
    gap: 0.5rem;

    .flag-icon {
      width: 20px;
      height: 20px;
      border-radius: 4px;
    }
  }

  .system-info {
    .system-details {
      padding: 2rem;
      background: var(--background-color);
      border-radius: 8px;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);

      .info-item {
        display: flex;
        margin-bottom: 1.5rem;
        padding: 1rem;
        background: white;
        border-radius: 8px;
        border: 1px solid var(--border-color);
        transition: all 0.3s ease;

        &:hover {
          border-color: var(--primary-color);
          box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
        }

        &:last-child {
          margin-bottom: 0;
        }

        .label {
          width: 120px;
          font-weight: 500;
          color: var(--text-color);
          padding-right: 1rem;
          border-right: 1px solid var(--border-color);
        }

        .value {
          flex: 1;
          color: #606266;
          padding-left: 1rem;
        }
      }
    }
  }
}

// 按钮通用样式
button {
  padding: 0.5rem 1rem;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.3s ease;
  border: 1px solid transparent;

  &.primary-button {
    background: var(--primary-color);
    color: white;

    &:hover {
      background: var(--hover-color);
    }
  }

  &.secondary-button {
    background: none;
    border-color: var(--primary-color);
    color: var(--primary-color);

    &:hover {
      background: var(--secondary-color);
    }
  }
}

.edit-button {
  min-width: 80px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--primary-color);
  color: white;
  border: none;
  border-radius: 8px;
  font-size: 0.9rem;
  cursor: pointer;
  transition: all 0.3s ease;

  &:hover {
    background: var(--hover-color);
  }

  &.save {
    background: #67C23A;

    &:hover {
      background: #529b2e;
    }
  }
}

.unit-dialog {
  .unit-form {
    .form-group {
      margin-bottom: 1.5rem;

      label {
        display: block;
        margin-bottom: 0.8rem;
        color: var(--text-color);
        font-weight: 500;
      }

      .select-group {
        width: 100%;

        :deep(.el-select) {
          width: 100%;
        }
      }

      input {
        width: 100%;
        height: 40px;
        padding: 0 1rem;
        border: 1px solid var(--border-color);
        border-radius: 8px;
        font-size: 1rem;
        transition: all 0.3s ease;

        &:focus {
          outline: none;
          border-color: var(--primary-color);
          box-shadow: 0 0 0 3px rgba(64, 158, 255, 0.1);
        }
      }
    }
  }
}

.add-button {
  &:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    border-color: var(--border-color);
    color: var(--text-color);

    &:hover {
      border-color: var(--border-color);
      color: var(--text-color);
    }
  }
}

// 图标字体
[class^="icon-"] {
  font-family: "iconfont" !important;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
}

.form-row {
  .input-group {
    input {
      &.editable {
        background-color: white;
        border-color: var(--primary-color);
        cursor: text;
      }
      
      &:not(.editable) {
        background-color: #f5f7fa;
        cursor: not-allowed;
      }
    }
  }

  .error-message {
    color: #f56c6c;
    font-size: 0.9rem;
    margin-top: 0.5rem;
    padding-left: 0.5rem;
  }
}

.password-dialog {
  .password-strength-meter {
    margin-top: 0.8rem;
    display: flex;
    align-items: center;
    gap: 1rem;

    .strength-label {
      font-size: 0.9rem;
      color: #606266;
      white-space: nowrap;
    }

    .strength-bars {
      flex: 1;
      display: flex;
      gap: 4px;

      .strength-bar {
        flex: 1;
        height: 4px;
        background: #EBEEF5;
        border-radius: 2px;
        transition: all 0.3s ease;

        &.active {
          &.weak { background: #F56C6C; }
          &.medium { background: #E6A23C; }
          &.strong { background: #67C23A; }
        }
      }
    }

    .strength-text {
      font-size: 0.9rem;
      min-width: 2em;
      
      &.weak { color: #F56C6C; }
      &.medium { color: #E6A23C; }
      &.strong { color: #67C23A; }
    }
  }

  .password-requirements {
    margin-top: 1rem;
    padding: 1rem;
    background: #F8F9FA;
    border-radius: 8px;

    .requirement {
      display: flex;
      align-items: center;
      gap: 0.5rem;
      margin: 0.5rem 0;
      color: #909399;
      font-size: 0.9rem;
      transition: all 0.3s ease;

      i {
        font-size: 1rem;
      }

      &.met {
        color: #67C23A;
      }
    }
  }
}

.security-questions-dialog {
  .question-group {
    margin-bottom: 2rem;
    padding: 1.5rem;
    background: #F8F9FA;
    border-radius: 8px;

    .question-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 1rem;

      .question-number {
        font-weight: 500;
        color: #303133;
      }

      .remove-question {
        color: #F56C6C;
        padding: 0;
      }
    }

    .question-select {
      width: 100%;
    }
  }

  .add-question {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 1.5rem;

    .question-tip {
      color: #909399;
      font-size: 0.9rem;
    }
  }

  .security-tips {
    background: #ECF5FF;
    border-radius: 8px;
    padding: 1rem;
    display: flex;
    gap: 1rem;

    i {
      color: #409EFF;
      font-size: 1.2rem;
      margin-top: 0.2rem;
    }

    .tips-content {
      flex: 1;

      p {
        margin: 0 0 0.5rem;
        color: #303133;
        font-weight: 500;
      }

      ul {
        margin: 0;
        padding-left: 1.2rem;

        li {
          color: #606266;
          font-size: 0.9rem;
          margin: 0.3rem 0;
        }
      }
    }
  }
}

.dialog-footer {
  display: flex;
  justify-content: flex-end;
  gap: 1rem;
  padding-top: 1rem;
}
</style>